<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户反馈</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户反馈 -->
    <el-table size="small" :data="problemList" highlight-current-row border element-loading-text="拼命加载中"
              style="width: 100%;text-align: center;margin-top: 20px">
      <el-table-column sortable prop="information" label="用户信息" width="300" align="center">
      </el-table-column>
      <el-table-column sortable prop="createTime" label="反馈时间" width="300">
      </el-table-column>
      <el-table-column sortable prop="problemDescription" label="反馈信息"  align="center">
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParam.currentPage"
      :page-sizes="[10, 50, 100, 500]"
      :page-size="pageParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "Problem",
    data() {
      return {
        problemList: [],
        // 分页参数
        pageParam: {
          currentPage: 1,
          pageSize: 10,
          total: 1000
        },
      }
    },
    created() {
      this.getUserProblem((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize)
    },
    methods: {
      handleSizeChange(item) {
        this.pageParam.pageSize = item;
        this.getUserProblem((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize)
      },
      //页数改变时
      handleCurrentChange(item) {
        this.pageParam.currentPage = item;
        this.getUserProblem((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize)
      },
      getUserProblem(start,size) {
        this.$axios({
          method: 'post',
          url: '/musicControl/getUserProblem/'+start+"/"+size,
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.problemList = res.data.data.info;
          this.pageParam.total=res.data.data.total;
        })
      },
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
